<template>
  <div>
    <template>
      <div class="page-header-content">
        <div class="avatar">
          <a-avatar size="large" :src="icon"/>
        </div>
        <div class="content">
          <div class="content-title">
            {{ timeFix }}，{{ user.name }}<span class="welcome-text">，我们来看看最近的公告吧</span>
          </div>
        </div>
      </div>
    </template>
    <div>
      <a-row :gutter="24">
        <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card
            class="project-list"
            style="margin-bottom: 24px;"
            title="最近公告"
            :body-style="{ padding: 0 }">
            <a-collapse v-for="(item, index) in date" :key="index" default-active-key="1" :bordered="false">
              <a-collapse-panel key="index" :header="item.title">
                <p>{{ item.comment }}</p>
              </a-collapse-panel>
            </a-collapse>
            <a-row>
              <a-col :span="24">
                <a-button :loading="loading" @click="moreList()" v-show="more" block>加载更多</a-button>
                <a-button :disabled="!more" v-show="!more" block>没有更多了</a-button>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { timeFix } from '@/utils/util'
import { mapState } from 'vuex'
import { getAllAnnouncement } from '@/api/manage'

export default {
  name: 'Workplace',
  computed: {
    ...mapState({
      nickname: (state) => state.user.nickname
    }),
    userInfo () {
      // console.log(this.$store.getters.userInfo)
      return this.$store.getters.userInfo
    }
  },
  data () {
    return {
      timeFix: timeFix(),
      name: '',
      icon: '',
      date: [],
      more: true,
      num: 1,
      total: 0,
      loading: false
    }
  },
  created () {
    this.user = this.userInfo
    this.icon = this.userInfo.icon
    this.getAll()
  },
  methods: {
    getAll () {
      var that = this
      const page = { pageSize: 10, pageNum: this.num }
      getAllAnnouncement(page).then((res) => {
        that.date = that.date.concat(res.datalist)
        that.total = Number(res.total)
        // console.log(that.date)
        // console.log(res.datalist)
        if (that.total / 10 <= that.num) {
          that.more = false
        }
        that.loading = false
      })
    },
    moreList () {
      this.loading = true
      this.num++
      this.getAll()
    }
  }
}
</script>

<style lang="less" scoped>
  @import "./Workplace.less";
</style>
